<template>
    <div class="content">
        <Panel title="商品分类管理" :bodyStyle="{padding:'10px'}" :style="{height:scrollerHeight}">
            <div>
<!--                <SearchBox style="width:300px"-->
<!--                           placeholder="输入搜索关键词"-->
<!--                           v-model="value"-->
<!--                           @search="onSearch($event)">-->
<!--                    <Addon>-->
<!--                        <span v-if="value" class="textbox-icon icon-clear" title="Clear value"-->
<!--                              @click="value=null"></span>-->
<!--                    </Addon>-->
<!--                    <Menu>-->
<!--                        <MenuItem value="all" text="搜索" iconCls="icon-ok"></MenuItem>-->
<!--                    </Menu>-->
<!--                </SearchBox>-->
                <LinkButton iconCls="icon-add" style="margin-left: 30px" @click="addNewCategory()">新增分类</LinkButton>
            </div>
            <el-table
                    :height="datagridHeight"
                    size="mini"
                    :data="data"
                    style="width: 100%; margin:10px 0"
                    row-key="categoryId"
                    border
                    :tree-props="{ children: 'children' }"
                    :expand-row-keys="['1','2']"
            >
                <el-table-column
                        prop="label"
                        label="名称"
                        sortable
                        width="180"
                ></el-table-column>
                <el-table-column prop="categoryName" label="分类名称" sortable >
                </el-table-column>
                <el-table-column prop="detail" label="分类说明" sortable >
                </el-table-column>
                <el-table-column width="170" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editMenu(scope.row)"
                        >编辑
                        </el-button
                        >
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
                        >删除
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

        </Panel>

        <Dialog ref="edit"
                :title="dialogTitle"
                :dialogStyle="{width:'500px',height:'380px'}"
                :modal="true"
                :draggable="true"
                :resizable="true">
            <Form ref="form" :model="categotyModel" :rules="rules" labelPosition="before" :labelWidth="80"
                  :floatingLabel="true" @validate="errors=$event" style="max-width:500px;padding: 10px">

                <FormField name="categoryName" label="分类名称" >
                    <TextBox v-model="categotyModel.categoryName"></TextBox>
                </FormField>
                <FormField name="parentId" label="父级分类" >
                    <ComboTree :data="selectdata" v-model="categotyModel.parentId" placeholder="选择父级分类">
                        <Tree slot="tree"></Tree>
                    </ComboTree>
                </FormField>
                <FormField name="detail" label="分类说明" >
                    <TextBox v-model="categotyModel.detail" :multiline="true"
                             style="width:100%;height:120px"></TextBox>
                </FormField>
            </Form>
            <div class="tools">
                <LinkButton iconCls="icon-ok" @click="addConfirm()" style="margin-right:10px">确定</LinkButton>
                <LinkButton iconCls="icon-no" @click="$refs.edit.close()" style="margin-right:10px">取消</LinkButton>
            </div>
        </Dialog>


    </div>
</template>

<script>
    import api from "../../../../utils/axios/api"

    export default {
        data() {
            return {
                selectdata:[],

                // 搜索模型
                searchModel: {
                    categoryName: ""
                },

                // 0新增 1编辑
                editTag: 0,
                // 对话框标题
                dialogTitle: "新增",
                value: "",
                data: [],
                dialogVisible: false,
                currentrow: {},
                // 表单模型
                categotyModel: {
                    parentId:1,
                    categoryName: "",
                    detail: ""
                },
                // 验证规则
                rules: {
                    categoryName: [{required: true, trigger: "change", message: "请输入分类名称"}],
                }
            }
        },
        name: "category.vue",
        computed: {
            // 滚动区高度
            // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
            scrollerHeight: function () {
                return (window.innerHeight - 220) + 'px';
            },
            datagridHeight: function () {
                return (window.innerHeight - 340) + 'px';
            }
        },
        created() {
            this.getCategoryList();
        },
        mounted() {
            // 初始化关闭对话框
            this.$refs.edit.close();
        },
        methods: {
            // 工具栏删除选项
             handleDelete(row){
                let _this=this;
                _this.$confirm("确定删除吗 ?", "系统提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async ()=>{
                    let param={categoryId:row.categoryId}
                    let {data:res}=await api.deleteProductCategory(param);
                    if(res.code==0){
                        _this.$message({
                            message:res.msg,
                            type:'success'
                        })
                        this.getCategoryList();
                    }
                })

            },
            // 点击搜索按钮
            onSearch(r){
                 this.searchModel.categoryName=r.value;
                 this.getCategoryList();

            },
            // 点击行编辑按钮
            async editMenu(row){
                this.editTag = 1;
                this.dialogTitle="编辑分类"
                this.currentrow = row;
                let param = {
                    categoryId: this.currentrow["categoryId"]
                }
                console.log(param);
                let {data: res} = await api.getProductCategoryById(param);
                if (res.code == 0) {
                    console.log(res.data);
                    this.categotyModel = res.data;
                }
                this.$refs.edit.open();
            },

            // 获取所有分类列表
            async getCategoryList() {
                 this.data=[];
                let param = {
                    categoryName: this.searchModel.categoryName
                };
                let {data: res} = await api.getProductCategorList(param);
                this.data = res.data;
                this.selectdata=this.getSelectData(res.data);
            },
            addNewCategory(){
                let _this=this;
                _this.editTag=0;
                _this.dialogTitle="新增分类";
                _this.resetForm();
                _this.$refs.edit.open();
            },

            // 递归取选项
            getSelectData(data){
                let result=[];
                data.forEach(p=>{
                    let x={};
                    x.id=p.categoryId;
                    x.text=p.categoryName;
                    if(p.children.length>0){
                        x.children=this.getSelectData(p.children)
                    }
                    result.push(x);
                })
                return result;
            },

            // 对话框确认按钮
            addConfirm() {
                let _this = this;
                _this.$refs.form.validate(async () => {
                    let res = null;
                    let param = {
                        categoryId: this.currentrow["categoryId"],
                        parentId:this.categotyModel.parentId,
                        categoryName: this.categotyModel.categoryName,
                        detail: this.categotyModel.detail
                    }
                    if (this.editTag == 1) {
                        res = await api.updateProductCategory(param);
                    } else {
                        res = await api.addProductCategory(param);
                    }
                    let data = res.data;
                    this.$refs.edit.close();
                    if (data.code == 0) {
                        _this.$message({
                            message: data.msg,
                            type: "success"
                        });
                        this.getCategoryList();
                    }
                    this.resetForm();
                })


            },
            //解决重置表单时报 'resetFields' of undefined的错
            resetForm() {
                this.categotyModel.parentId=1;
                this.categotyModel.categoryName="";
                this.categotyModel.detail="";
            },

            // 删除当前行
            deleterow(row) {
                console.log("1211");
                let _this = this;
                _this.$confirm("确定删除吗 ?","系统提示",{
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async()=>{
                    let param = {
                        id: row.id
                    }
                    let {data: res} = await api.deleteCategory(param);
                    if (res.code == 0) {
                        _this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        _this.getCategoryList();
                    }
                })

            }

        }
    }
</script>

<style scoped lang="scss">
    .content {
        padding: 10px;

        .datagrid {
            margin-top: 20px;
        }

    }

    .tools {
        display: flex;
        justify-content: flex-end;

    }

</style>